import { NavBar, DatePicker } from 'antd-mobile'
import '@/pages/Month/index.css'
import {useEffect, useMemo, useState} from "react";
import classNames from "classnames";
import dayjs from "dayjs";
import { useSelector} from "react-redux";
import _ from 'lodash'
import DayBill from "@/pages/Month/compponents/DayBill/index.jsx";


const Month = () => {
    // 按月做数分组
    const billList=useSelector(state => state.billList.billList)
    //useMemo相当于Vue的computed,缓存计算
    const monthGroup = useMemo(() => {
        // return 出去计算后的值
        return _.groupBy(billList,(item)=>dayjs(item.date).format('YYYY-MM') );
    //     当billList发生变化时，useMemo中的逻辑代码才会重新计算，否则会调取缓存数据
    }, [billList]);


    // 控制弹框的打开和关闭
    const [dataVisible,setDateVisible]=useState(false);

    // 控制时间显示
    const [currentDate,setCurrentDate]=useState(()=>{
        return dayjs(new Date()).format('YYYY-MM')
    })
    // 当前月数据
    const [currentMonthList,setMonthList]=useState([]);

 const monthResult= useMemo(()=>{
        //支出/收入/结余
        const pay=currentMonthList.filter(item=>item.type==='pay').reduce((a,c)=>a+c.money,0)
        const income=currentMonthList.filter(item=>item.type==='income').reduce((a,c)=>a+c.money,0)
        return {
            pay,income,
            total:pay+income
        }

    },[currentMonthList])

    const onConfirm=(date)=>{
        setDateVisible(false);
        const formatDate=dayjs(date).format('YYYY-MM');
       setMonthList( monthGroup[formatDate])
        setCurrentDate(formatDate);
    }
    const onCancel=()=>{
        setDateVisible(false);
    }
    const onClose=()=>{
        setDateVisible(false);
    }


    // 初始化的时候把当前月的统计数据显示出来
    useEffect(()=>{
        const nowDate=dayjs().format('YYYY-MM')
        if (monthGroup[nowDate]){
            setMonthList( monthGroup[nowDate])
        }


    },[monthGroup])


    const dayGroup = useMemo(() => {
        const groupData=_.groupBy(currentMonthList,(item)=>dayjs(item.date).format('YYYY-MM-DD'))
        const keys=Object.keys(groupData);
        // return 出去计算后的值
        return {
            groupData,keys
        }

    }, [currentMonthList]);


    return (
        <div className="monthlyBill">
            <NavBar className="nav" backArrow={false}>
                月度收支
            </NavBar>
            <div className="content">
                <div className="header">
                    {/* 时间切换区域 */}
                    <div className="date" onClick={()=>setDateVisible(true)}>
            <span className="text">
              {currentDate}月账单
            </span>
                        {/*思路：根据当前弹框打开的状态控制expand类名是否存在*/}
                        {/*要用classNames函数，这里是如果dataVisible是true，expend显示，否则不显示
                           classNames函数的作用就是把多个className链接起来的工具，里面可以有任意数量的参数，参数可以是
                           字符串（css中的class名），也可以是对象（style直接写）
                        */}
                        <span className={classNames('arrow',dataVisible && `expand`)}></span>
                    </div>
                    {/* 统计区域 */}
                    <div className='twoLineOverview'>
                        <div className="item">
                            <span className="money">{monthResult.pay.toFixed(2)}</span>
                            <span className="type">支出</span>
                        </div>
                        <div className="item">
                            <span className="money">{monthResult.income.toFixed(2)}</span>
                            <span className="type">收入</span>
                        </div>
                        <div className="item">
                            <span className="money">{monthResult.total.toFixed(2)}</span>
                            <span className="type">结余</span>
                        </div>
                    </div>
                    {/* 时间选择器 */}
                    <DatePicker
                        className="kaDate"
                        title="记账日期"
                        precision="month"
                        visible={dataVisible}
                        max={new Date() }
                        onConfirm={onConfirm}
                        onCancel={onCancel}
                        onClose={onClose}

                    />
                </div>
            {/*    单日列表统计*/}
                {
                    dayGroup.keys.map(key=>{
                        // 向子组件传递两个参数，date,billList
                        return <DayBill key={key} date={key} billList={dayGroup.groupData[key]}/>
                    })
                }
                {/*<DayBill/>*/}
            </div>
        </div >
    )
}

export default Month